<template>
<div v-if="data.name" class="detail_page">
  <img class="back" src="~@/assets/back.png"  alt="" @click="back">
  <div class="top_info">
    <div class="flex_sb">
      <img :src="data.imgs[0]||data.imgs[1]||data.logo" alt="">
      <div class="chain_div">
        <div class="name">{{data.name}}</div>
      </div>
      <div class="score">{{data.createtime}}</div>
    </div>
    <div class="m10">相关公司：<span style='color:#f93' @click="toComapny(data.identification)">{{data.company_name}}</span></div>
    <div class="flex_sb flex_a">
      <span class="red_div">人工推荐</span>
      <div>浏览：{{data.read_num}}</div>
    </div>
  </div>
  <div class="heng"></div>
  <div class="base_info">
    <div class="big_t">项目详情</div>
    <div class="flex_sb info_item">
      <div class="w50">
        <div class="small_t">投资金额</div>
        <div class="small_tt">{{data.invest_money}}</div>
      </div>
      <div class="w50">
        <div class="small_t">占地面积</div>
        <div class="small_tt">{{data.area}}</div>
      </div>
    </div>
    <div class="flex_sb info_item">
      <div class="w50">
        <div class="small_t">意向区域</div>
        <div class="small_tt">{{data.intent_area}}</div>
      </div>
      <div class="w50">
        <div class="small_t">项目产值</div>
        <div class="small_tt">{{data.output_value}}</div>
      </div>
    </div>
    <div class="flex_sb info_item">
      <div class="w50">
        <div class="small_t">项目税收</div>
        <div class="small_tt">{{data.tax||'-'}}</div>
      </div>
      <div class="w50">
      </div>
    </div>
  </div>
  <div class="heng"></div>
  <div class="base_info">
    <div class="big_t">相关介绍</div>
    <div v-html="data.content"></div>
  </div>
  <back />
</div>
</template>
<script>
import {projects,jssdk} from '@/api/api'
import back from '@/components/back.vue'

import { encode } from '@/utils/utils.js'
export default {
  data(){
    return{
      data:{name:''},
      mapList:[],
      newsList:[],
      active:0
    }
  },
  components:{back},
  created(){
    let id = this.$route.query.id
    projects.GetBusinessclueDetail({id}).then(res=>{
      this.data = res.data
      jssdk({url: encode(window.location.href)}).then(res=>{
        this.wxInit(res.data)
      })
    })
  },
  methods:{
    back(){
      this.$router.go(-1)
    },
    toComapny(identification){
      this.$router.push({name:'companyDetail',query:{identification}})
    },
    wxInit(data){
      let that = this
      wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: data.appId, // 必填，公众号的唯一标识
        timestamp: data.timestamp, // 必填，生成签名的时间戳
        nonceStr: data.nonceStr, // 必填，生成签名的随机串
        signature: data.signature,// 必填，签名
        jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline','updateAppMessageShareData','updateTimelineShareData'] // 必填，需要使用的JS接口列表
      })
      wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
        wx.updateAppMessageShareData({ 
          title: `${that.data.name}`, // 分享标题
          desc: that.data.company_name,
          link: window.location.href,
          imgUrl: that.data.logo,
          success: function () {
            // 设置成功
          }
        })
         //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
        wx.updateTimelineShareData({ 
          title: `${that.data.name}`, // 分享标题
          link: window.location.href,
          imgUrl: that.data.logo,
          success: function () {
            // 设置成功
          }
        })
      }); 
    },
  }
}
</script>
<style lang="scss" scoped>
.red_div{
  background: red;
  color: #fff;
  border-radius: 2px;
  padding: 2px 4px;
  font-size: 12px;
}
.detail_page{
  width: 100%;
  background: #f3f3f3;
  position: relative;
}
.heng{
  height: 10px;
  width: 100%;
}
.heng1{
  height: 5px;
  width: 100%;
}
.m10{
  margin: 10px 0;
}
.top_info{
  width: 100%;
  background: #fff;
  padding: 15px;
  top: 0;
  .name{
    font-size: 18px;
    font-weight: 500;
    color: #222;
    margin-bottom: 10px;
  }
  .chain_div{
    width: calc(100% - 150px);
    .chain_item{
      background: #f93;
      color: #fff;
      font-size: 14px;
      padding: 2px 4px;
      margin: 0 5px 5px 0;
      border-radius: 2px;
      display: inline-block;
    }
  }
  img{
    width: 68px;
    border-radius: 4px;
  }
  .score{
    width: 70px;
    text-align: right;
    font-size: 12px;
  }
}
.base_info{
  width: 100%;
  background: #fff;
  padding: 20px 15px;
  .big_t{
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 12px;
    color: #111;
  }
  .small_t,.small_tt{
    font-size: 14px;
    color: #999;
  }
  .small_tt{
    color: #333;
    margin-top: 5px;
  }
}
.w50{
  width: 50%;
}
.info_item{
  margin-bottom: 18px;
}
.dw_map{
  display: flex;
  flex-wrap: wrap;
  .c_item{
    width: calc(33% - 10px);
    margin-right: 10px;
    border-radius: 4px;
    border: 1px solid #eee;
    color: #333;
    padding: 4px 0;
    text-align: center;
    margin-bottom: 10px;
  }
  .active{
    color: #fff;
    background: #f93;
  } 
}
.news_item{
  margin-bottom: 10px;
  &:active{
    background: rgba($color: #000000, $alpha: .2);
  }
  .time{
    width: 100px;
  }
  .news_name{
    width: calc(100% - 100px);
    font-size: 15px;
    color: #222;
  }
}
.zhan_btn{
  height: 60px;
  width: 100%
}
.jd_div{
  height: 60px;
  width: 100%;
  position:fixed;
  bottom: 0px;
  left: 0;
  background: #fff;
  padding: 10px 15px;
  .jd_btn{
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #f93;
    color: #fff;
    font-size: 16px;
    border-radius: 6px;
  }
}
.back{
	position:relative;
	left: 4px;
	top: 7px;
	height: 32px !important;
	width: 32px !important;
	z-index: 1000;
  margin-bottom: 5px;
}
</style>